<template>
  <div class="right">
    <div class="lower_left">
      <div class="box">
        <p>渲染数据类型：</p>
        <!-- <el-cascader v-model="selectTitle" :options="Rendering" /> -->
        <el-select v-model="selectTitle" placeholder="Select" @change="handleChange">
          <el-option v-for="item in Rendering" :key="item.value" :label="item.label" :value="item.value"
            :disabled="item.disabled" />
        </el-select>
      </div>
      <div class="box">
        <p>色调映射类型：</p>
        <!-- 在这里添加你的色调映射类型输入 -->
        <!-- <el-cascader v-model="selectColour" :options="Rendering" /> -->
        <el-select v-model="selectColour" placeholder="Select">
          <el-option v-for="item in colourMappingOptions" :key="item.value" :label="item.label" :value="item.value"
            :disabled="item.disabled" />
        </el-select>
      </div>
      <div class="box">
        <p>显示范围：</p>
        <!-- 在这里添加你的显示范围输入 -->
        <div class="elbox" />
        <el-input-number v-model="minValue" :controls="false" />
        <span style="margin: 0 5px;">-</span>
        <el-input-number style="padding-right: 15px;" v-model="maxValue" :controls="false" />
      </div>
    </div>

    <div class="container">
      <div class="title">
        <!-- 根据内容改p标签 -->
        <!-- <p>温度</p> -->
        <p>{{ selectTitle === 'temperature' ? '温度' : selectTitle === 'pressure' ? '压力' : '压力' }}</p>
      </div>
      <div class="content">
        <div class="color-bar" :style="getColorBoxStyle()">
          <div v-for="(item, index) in values" :key="index" class="color-box">
            <!-- <span class="value">{{ item }}</span> -->

          </div>

        </div>
        <div class="number">
          <p v-for="(item, index) in values" :key="index">
           <!-- {{ (maxValue - (maxValue / 15) * (item - 1)).toFixed(2) }} -->
             {{ (maxValue - (maxValue / 15) * (item - 1)).toFixed(2) === "0.00" ? 0 : (maxValue - (maxValue / 15) * (item - 1)).toFixed(2) }}

          </p>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import Rendering from '../../data/Rendering2.json';

export default {
  name: 'Right',
  data() {
    return {
      Rendering, // 这将在模板中使用
      options: [], // 如果需要，初始化选项
      selectTitle: 'temperature', // 如果需要，初始化 select
      selectColour: 'hotMetal', // 如果需要，初始化 select
      minValue: 0, // 显示范围最小值
      maxValue: 933.3897094726562, // 显示范围最大值
      // values: Array.from({ length: 16 }, (_, i) => i + 1) // 默认值数组，模拟渲染的颜色条数据
      values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
    };
  },
  computed: {
    colorBarStyle() {

    },
    // 生成色调映射类型选项列表
    colourMappingOptions() {
      const selectedItem = this.Rendering.find(item => item.value === this.selectTitle);
      return selectedItem ? selectedItem.colourMapping : [];
    }
  },
  methods: {
    handleChange(select) {
      // console.log(select);
      const selectedItem = this.Rendering.find(item => item.value === select);
      if (selectedItem && selectedItem.maxValue !== null) {
        this.maxValue = selectedItem.maxValue;
      } else {
        // this.maxValue = 10; // 默认值或根据需求设置其他值
        //注释就不更改
      }
    },
    getColorBoxStyle() {
      switch (this.selectColour) {
        case 'grayScale':
          return { background: 'linear-gradient(to bottom, white, black)' };
        case 'hotMetal':
          return { background: 'linear-gradient(to bottom, white, #EAEBC4,#DBD192,#C8A650,#A9720E,#813D00,#4F0406,black)' };
        case 'rainbow':
          return { background: 'linear-gradient(to bottom, #C33309 ,#EC6914 ,#E2B600,#BBCA55,#80BD89,#369998,#005F89,#04115A,black)' };
        default:
          return {}; // 默认样式，可以根据需求调整
      }
    }
    // getColorBoxStyle(value) {

    //   // console.log('Value:', value); // 打印传入的值
    //   // const hue = (value * 16) % 360; // 根据值计算颜色的色相
    //   // console.log('Hue:', hue); // 打印计算出的色相
    //   // return {
    //   //   background: `linear-gradient(to bottom, hsl(${hue}, 100%, 50%), hsl(${hue + 180}, 100%, 50%))` // 返回背景样式对象
    //   // };

    //   return {
    //     // background: 'linear-gradient(to bottom, white, black)',//Gray Scale
    //     // background: 'linear-gradient(to bottom, white, #EAEBC4,#DBD192,#C8A650,#A9720E,#813D00,#4F0406,black)',//Hot metal//空一格取下
    //     background: 'linear-gradient(to bottom, #C33309 ,#EC6914 ,#E2B600,#BBCA55,#80BD89,#369998,#005F89,#04115A,black)',//Rainbow//空一格取上
    //   };
    // }
  }
};
</script>

<style lang="scss" scoped>
.right {
  padding: 0;
  background: linear-gradient(to bottom, #8BCFFF, #ffffff);
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.lower_left {
  width: 290px;
  height: 150px;
  background-color: #FFFFFF;
  display: flex;
  flex-wrap: wrap;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  /* 添加边框投影 */
  float: left;
  /* 使元素浮动 */
  position: absolute;
  /* 绝对定位 */
  // top: 20px;
  bottom: 10px;
  /* 下移20像素 */
  left: 350px;
  /* 右移10像素 */
  border-radius: 4px;


  .box {
    width: 290px;
    display: flex;
    justify-content: center;
    align-items: center;
// overflow: hidden;
    p {
      width: 130px;
      font-size: 12px;
      color: #313335;
      margin-left: 14px;
    }

    .elbox{
      // position: relative;
      // width: 100px;
      height: 30px;
      // background-color: pink;
      margin-right: -20px;
// padding-right: 20px;

    }

  }


  :deep(.el-select__wrapper) {
    width: 176px;

  }
  // :deep(.el-input__inner) {


  // }
  // :deep(.el-input__wrapper) {
  //   // width: 10px;
  //   // margin-right: 20px;

  // }

  :deep(.el-input-number.is-without-controls) {
   width: 100px;
  //  margin-right: 14px;

  }

}

.container {
  position: relative;
  // margin-left: 30px;
  margin-top: 15px;
  display: flex;
  // justify-content: center;
  //   align-items: center;
  flex-wrap: wrap;
  // flex-direction: column;
  /* 设置为垂直方向布局--盒子外 */
  float: right;
  position: absolute;
  right: 15px;
  // width: 120px;//不给宽度--子元素撑大
  height: 440px;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  /* 添加边框投影 */
  border-radius: 4px;

  .title {
    font-size: 12px;
    margin: 16px 0px 16px 10px;
    // margin-left: 10px;
    // width: 100px;
    position: absolute;
  }

  .content {
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;

    .number {
      margin-top: -4px;
      margin-left: 6px;
      margin-right: 20px;

      p {
        font-size: 12px;
        // line-height: 24px;
        height: 24px;
        display: flex;
        align-items: flex-end;
        /* 使用flexbox将内容对齐到底部 */

      }
    }
  }

  .color-bar {
    height: 400px;
    width: 40px;
    // margin: 0 20px 0 10px;
    margin-left: 10px;
    display: flex;
    // border-radius: 20px;
    overflow: hidden;
    flex-direction: column;
    height: 384px;

    // background-color: pink;
    /* 设置为垂直方向布局--盒子内 */
    .color-box {
      flex-grow: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 10px;
      border: 0.5px #b5b6b8 solid;

      .value {
        color: white;
        font-weight: bold;
      }

    }
  }

}



</style>
